<template>
<!--查询-->
<div style="margin-bottom: 15px;">
  用户名:<el-input v-model="form.userName" placeholder="请输入用户名" style="width: 240px;"></el-input>
  <el-button type="primary" @click="getUserInfo">查询</el-button>
</div>

<el-table :data="userInfoData" border style="width: 100%">
    <el-table-column prop="userId" label="编号" align="center" />
    <el-table-column prop="userName" label="用户名" align="center" />
    <el-table-column prop="roleName" label="角色" align="center" width="340px" >
      <template v-slot="scope">
        <span v-for="item in scope.row.roleName" :key="item.userId">
          {{ item.roleName }}&nbsp;&nbsp;
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="gender" label="性别" align="center" >
      <template v-slot="scope">
        <span v-if="scope.row.gender==true">男</span>
        <span v-if="scope.row.gender==false">女</span>
      </template>
    </el-table-column>
    <el-table-column prop="provinceName" label="所在省份" align="center" />
    <el-table-column prop="userName" label="所在市" align="center" />
    <el-table-column prop="countyName" label="所在县" align="center" />
    <el-table-column prop="userName" label="地址详情" align="center" show-overflow-tooltip >
      <template v-slot="scope">
        <span>{{ scope.row.address}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="createdBy" label="创建人" align="center" />
    <el-table-column prop="createdDate" label="创建时间" align="center" width="155px" />
    <el-table-column prop="updatedBy" label="修改人" align="center" />
    <el-table-column prop="updatedDate" label="修改时间" align="center" width="155px" />
    <el-table-column label="操作" align="center" width="160px" >
      <template v-slot="scope">
        <el-button type="primary" @click="UpdateUserInfo(scope.row.userId)">修改</el-button>
        <el-button type="danger" @click="delUserInfo(scope.row.userId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--分页-->
<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[3, 5, 7, 9]" :background="true" layout="total,slot, sizes" :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <span>
            ，每页{{ form.pageSize }}条，当前第:{{ form.pageIndex }}/{{ form.pageCount }}页
          </span>
        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[100, 200, 300, 400]" :background="true" layout="slot, prev, pager, next" :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button type="primary" class="btn-prev" @click="handleCurrentChange(1)" :disabled="form.pageIndex==1">首页</el-button>
        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[100, 200, 300, 400]" :background="true" layout="slot, jumper" :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button type="primary" class="btn-prev" @click="handleCurrentChange(form.pageCount)" :disabled="form.pageIndex==form.pageCount">尾页</el-button>
        </el-pagination>
      </td>
    </tr>
  </tbody>
</table>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import {useRoute,useRouter} from 'vue-router'

const route = useRoute();
const router = useRouter();

onMounted(() => {
  getUserInfo()
})

const form: any = reactive({
  pageIndex: 1,
  pageSize: 5,
  userName: '',
  pageCount:0,
  totalCount:0,
})

//分页
const handleSizeChange = (val: number) => {
  form.pageSize = val;
  getUserInfo()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex = val;
  getUserInfo()
}

//用户列表
const userInfoData: any = ref([])
const roleData: any = []
const roleNames: any = ''

const getUserInfo = () => {
  let userInfo = {
    pageIndex: form.pageIndex,
    pageSize: form.pageSize,
    userName:form.userName
  };
  axios.post('/api/UserManagemement/Search',userInfo).then(res=>{        
    console.log(res);
    userInfoData.value = res.data.data.list;
    form.pageCount = res.data.data.pageCount;
    form.totalCount = res.data.data.totalCount;
    // let userInfo={}
    // res.data.data.forEach((e:any) => {
    //   e.roleName.map((x:any)=>x.roleName)
    // });
    // console.log(userInfo);
    
  }).catch(err=>{
    console.log(err);
    
  })    
}

//修改
const UpdateUserInfo = (userId:number) => {
  router.push({
    "name": 'UpdateUserInfo',
    query: {
      userId:userId
    }
  })
}

//删除
const delUserInfo = (userId: number) => {
  let del = {
    userId:userId
  }
  ElMessageBox.confirm(
    '确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(() => {
      axios.post('/api/UserManagemement/Delete', del).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          ElMessage.success("删除成功!")
          //刷新页面
          getUserInfo()
        } else {
          ElMessage.error("刷新失败!")
          return
        }
      }).catch(err => {
        console.log(err);

      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

</script>

<style scoped>

</style>